<template>
  <div class="form-wrap">
    <!-- 表格 -->
    <form class="register">
      <p class="login-register">
        已经有账号了？
        <router-link class="router-link" :to="{ name: 'Login' }"
          >登录</router-link
        >
      </p>
      <h2>创建FireBlogs账号</h2>

      <div class="inputs">
        <!-- 名字 -->
        <div class="input">
          <input type="text" placeholder="First Name" v-model="firstName" />
          <User class="icon" />
        </div>
        <!-- 姓 -->
        <div class="input">
          <input type="text" placeholder="Last Name" v-model="lastName" />
          <User class="icon" />
        </div>
        <!-- 用户名 -->
        <div class="input">
          <input type="text" placeholder="Username" v-model="username" />
          <User class="icon" />
        </div>
        <!-- 邮箱 -->
        <div class="input">
          <input type="text" placeholder="Email" v-model="email" />
          <Email class="icon" />
        </div>
        <!-- 密码 -->
        <div class="input">
          <input type="password" placeholder="Password" v-model="password" />
          <Password class="icon" />
        </div>

        <!-- 错误处理 -->
        <div v-show="error" class="error">{{ this.errorMsg }}</div>
      </div>

      <button @click.prevent="register">注册</button>

      <div class="angle"></div>
    </form>

    <!--  -->
    <div class="background"></div>
  </div>
</template>

<script>
import Email from '../assets/Icons/envelope-regular.svg';
import Password from '../assets/Icons/lock-alt-solid.svg';
import User from '../assets/Icons/user-alt-light.svg';
// 引入数据库
import firebase from 'firebase/app';
import 'firebase/auth';
import db from '../firebase/firebaseInit';

export default {
  name: 'Register',
  components: { Email, Password, User },
  data() {
    return {
      firstName: '',
      lastName: '',
      username: '',
      email: '',
      password: '',
      error: null,
      errorMsg: '',
    };
  },
  methods: {
    async register() {
      // 检查
      if (
        this.email !== '' &&
        this.password !== '' &&
        this.firstName !== '' &&
        this.lastName !== '' &&
        this.username !== ''
      ) {
        this.error = false;
        this.errorMsg = '';
        const firebaseAuth = await firebase.auth();
        // 创建 用户 用 email 账号
        const createUser = await firebaseAuth.createUserWithEmailAndPassword(
          this.email,
          this.password
        );
        const result = await createUser;
        const dataBase = db.collection('users').doc(result.user.uid);
        // 在数据库中 设置 用户的 所有值
        await dataBase.set({
          firstName: this.firstName,
          lastName: this.lastName,
          username: this.username,
          email: this.email,
        });
        this.$router.push({ name: 'Home' });
        return;
      }
      // 不通过
      this.error = true;
      this.errorMsg = '请填写所有字段';
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  h2 {
    max-width: 350px;
  }
}
</style>
